<template>
  <div class="recommend-list">
    <div v-if="loading && page === 1">加载中...</div>
    <div v-else>
      <div v-for="item in commandList" :key="item.id" class="recommend-item" @click="goToDetail(item.id)">
        <h3>{{ item.title }}</h3>
        <p v-if="item.type === 1" class="type-sell">
          出售
        </p>
        <p v-else-if="item.type === 2" class="type-rent">
          租赁
        </p>
        <p>{{ item.description }}</p>
        <p v-if="item.type === 1">
          租金: {{ item.price }} 元/天（共 {{ item.rentDay }} 天）
        </p>
        <p v-else-if="item.type === 2">
          出售价格: {{ item.price }} 元
        </p>
        <div class="image-container">
          <img v-for="(image, index) in item.imageUrls" :key="index" :src="image" alt="商品图片" class="goods-image" />
        </div>
      </div>
      <div v-if="hasMore" class="load-more">
        <button @click="loadMore" :disabled="loading">
          {{ loading ? '加载中...' : '加载更多' }}
        </button>
      </div>
      <div v-else class="no-more">没有更多数据了</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      commandList: [], // 商品列表
      loading: false, // 是否正在加载
      page: 1, // 当前页码
      hasMore: true // 是否有更多数据
    };
  },
  created() {
    this.fetchCommandList();
  },
  methods: {
    async fetchCommandList() {
      this.loading = true;
      try {
        const response = await axios.get('http://localhost:9090/good/commandlist', {
          params: {
            page: this.page
          }
        });
        const data = response.data.data; // 注意：数据在 `data` 字段中
        if (data.length > 0) {
          // 预处理 imageUrls
          const processedData = data.map(item => {
            let imageUrls = item.imageUrls;
            if (typeof imageUrls === 'string') {
              if (imageUrls === '[]') {
                imageUrls = []; // 如果是 "[]"，设置为空数组
              } else {
                // 如果是 "[https://xxx.png, https://yyy.png]"，去除括号并分割为数组
                imageUrls = imageUrls.replace(/[$$$$]/g, '').split(',').map(url => url.trim());
              }
            }
            return { ...item, imageUrls };
          });
          this.commandList = this.commandList.concat(processedData);
        } else {
          this.hasMore = false; // 没有更多数据
        }
      } catch (error) {
        console.error('获取商品列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    loadMore() {
      if (this.hasMore) {
        this.page++; // 加载下一页
        this.fetchCommandList();
      }
    },
    goToDetail(id) {
      this.$router.push({ name: 'GoodDetail', params: { id } });
    }
  }
};
</script>

<style scoped>
.recommend-list {
  padding: 20px;
}

.recommend-item {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
}

.recommend-item h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.recommend-item p {
  margin: 5px 0;
  color: #555;
}

.type-sell {
  color: green;
  font-weight: bold;
}

.type-rent {
  color: #333;
  font-weight: bold;
}

.image-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px;
  margin-top: 10px;
}

.goods-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

.load-more button {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.load-more button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.no-more {
  text-align: center;
  margin-top: 20px;
  color: #999;
}
</style>